shadowrootadoptedstylesheets on <template> by KurtCattiSchmidt · Pull Request #12339 · whatwg/html

KurtCattiSchmidt · 2026-04-06T19:00:19Z

Adds support for shadowrootadoptedstylesheets on HTMLTemplateElement. <style type="module"> support is added in this PR: #11687

At least two implementers are interested (and none opposed):
- Chromium
- …
Tests are written and can be reviewed and commented upon at:
- wpt/shadow-dom/declarative/tentative/shadowrootadoptedstylesheets (see https://wpt.fyi/results/shadow-dom/declarative/tentative/shadowrootadoptedstylesheets)
Implementation bugs are filed:
- Chromium: https://issues.chromium.org/issues/448174611
- Gecko: https://bugzilla.mozilla.org/show_bug.cgi?id=2037650
- WebKit: https://bugs.webkit.org/show_bug.cgi?id=314242
- Deno (only for timers, structured clone, base64 utils, channel messaging, module resolution, web workers, and web storage): …
- Node.js (only for timers, structured clone, base64 utils, channel messaging, and module resolution): …
Corresponding HTML AAM & ARIA in HTML issues & PRs: N/A
MDN issue is filed: Declarative CSS Module Scripts mdn/mdn#824
The top of this comment includes a clear commit message to use.

(See WHATWG Working Mode: Changes for more details.)

Addresses #10673

/indices.html ( diff )
/infrastructure.html ( diff )
/parsing.html ( diff )
/scripting.html ( diff )
/webappapis.html ( diff )

noamr · 2026-04-16T16:36:27Z

From an initial look this seems to be on the right track. I need to spend some time on the details though.
cc @emilio

keithamus · 2026-04-16T17:23:35Z

Right now all of the shadowroot* properties map to attachShadow({}) properties. Do we want to add adoptedStyleSheets to ShadowRootInit?

noamr · 2026-04-16T19:31:46Z

Right now all of the shadowroot* properties map to attachShadow({}) properties. Do we want to add adoptedStyleSheets to ShadowRootInit?

Note that the current properties of ShadowRootInit become read only on the ShadowRoot, unlike adoptedStylesheets whch is a mutable array-like thing.

So I think it might be nice to include it in the init dictionary but I could also see why it's not necessary.

KurtCattiSchmidt · 2026-04-22T22:03:33Z

Right now all of the shadowroot* properties map to attachShadow({}) properties. Do we want to add adoptedStyleSheets to ShadowRootInit?

Agreed with @noamr's response here - since there's already an adoptedStyleSheets property on the imperative version that references a mutable array, we don't need to add it again to ShadowRootInit.

Think of shadowrootadoptedstylesheets as a purely declarative thing, since it's lacking in the declarative version but present in the imperative version.

emilio

Question, might be me misunderstanding CSS modules, but I'd figure I'd ask...

…rializable, and failed fetch behavior

noamr · 2026-05-07T10:05:51Z


   <li>
-    <p>Let <var>result</var> be <span>ParseJSONModule</span>(<var>source</var>).</p>
+    <p>Run the steps to <span>synchronously replace the rules of a <code>CSSStyleSheet</code></span>
+    on <var>sheet</var> given <var>source</var>.</p>

    <p>If this throws an exception, catch it, and set <var>script</var>'s <span


Double "and", this is probably better as a set of steps.

This block is used a few times in the spec (e.g. https://html.spec.whatwg.org/#creating-scripts:parsejsonmodule and part 6 of https://html.spec.whatwg.org/#creating-a-css-module-script). For now, I'd like to keep this consistent. I can file a separate bug and fix this everywhere though in parallel - what do you recommend?

This change updates the fetch behavior to match whatwg/html#12339. Note that this modifies the code for existing import, import(), and modulepreload for consistency, but the existing behavior for these API's does *not* change in any circumstance. The only observable change is in the shadowrootadoptedstylesheets fetching behavior. By modifying the CSS module fetching to first create the CSSStyleSheet before fetching and calling replaceSync upon completion, we are able to remove the placeholder stylesheets that were being inserted for shadowrootadoptedstylesheets. This simplifies the logic considerably and will be more performant. Unlike the other API's for fetching a CSS Module Script, shadowrootadoptedstylesheets will leave behind an empty CSSStyleSheet in adoptedStyleSheets if the fetch fails. This simplifies the logic and seems like a reasonable trade off for a rare condition. Earlier versions of this CL removed it upon failure, but the implementation was considerably more complex and had other side effects. Change-Id: If00445458983f5062a1ca2d83ed0253cc171d1ff Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7709812 Reviewed-by: Dan Clark <daniec@microsoft.com> Commit-Queue: Kurt Catti-Schmidt <kschmi@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1629010}

…a=testonly Automatic update from web-platform-tests [CSS Modules] Update fetching strategy This change updates the fetch behavior to match whatwg/html#12339. Note that this modifies the code for existing import, import(), and modulepreload for consistency, but the existing behavior for these API's does *not* change in any circumstance. The only observable change is in the shadowrootadoptedstylesheets fetching behavior. By modifying the CSS module fetching to first create the CSSStyleSheet before fetching and calling replaceSync upon completion, we are able to remove the placeholder stylesheets that were being inserted for shadowrootadoptedstylesheets. This simplifies the logic considerably and will be more performant. Unlike the other API's for fetching a CSS Module Script, shadowrootadoptedstylesheets will leave behind an empty CSSStyleSheet in adoptedStyleSheets if the fetch fails. This simplifies the logic and seems like a reasonable trade off for a rare condition. Earlier versions of this CL removed it upon failure, but the implementation was considerably more complex and had other side effects. Change-Id: If00445458983f5062a1ca2d83ed0253cc171d1ff Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7709812 Reviewed-by: Dan Clark <daniec@microsoft.com> Commit-Queue: Kurt Catti-Schmidt <kschmi@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1629010} -- wpt-commits: e564867fbfe3cc70cc8d43ddac392b7b848bc7e4 wpt-pr: 59805

…a=testonly Automatic update from web-platform-tests [CSS Modules] Update fetching strategy This change updates the fetch behavior to match whatwg/html#12339. Note that this modifies the code for existing import, import(), and modulepreload for consistency, but the existing behavior for these API's does *not* change in any circumstance. The only observable change is in the shadowrootadoptedstylesheets fetching behavior. By modifying the CSS module fetching to first create the CSSStyleSheet before fetching and calling replaceSync upon completion, we are able to remove the placeholder stylesheets that were being inserted for shadowrootadoptedstylesheets. This simplifies the logic considerably and will be more performant. Unlike the other API's for fetching a CSS Module Script, shadowrootadoptedstylesheets will leave behind an empty CSSStyleSheet in adoptedStyleSheets if the fetch fails. This simplifies the logic and seems like a reasonable trade off for a rare condition. Earlier versions of this CL removed it upon failure, but the implementation was considerably more complex and had other side effects. Change-Id: If00445458983f5062a1ca2d83ed0253cc171d1ff Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7709812 Reviewed-by: Dan Clark <daniecmicrosoft.com> Commit-Queue: Kurt Catti-Schmidt <kschmimicrosoft.com> Cr-Commit-Position: refs/heads/main{#1629010} -- wpt-commits: e564867fbfe3cc70cc8d43ddac392b7b848bc7e4 wpt-pr: 59805 UltraBlame original commit: 04a038fe6e54a754c927f29afe85d3c66476f8a3

KurtCattiSchmidt added 4 commits March 31, 2026 15:27

Initial port, needs fetch

a7ece98

Adding fetch, still rough

b576c09

Clarifying the two sheets

aeca132

Updating steps and fixing error

8cdd137

KurtCattiSchmidt requested a review from dandclark April 7, 2026 17:03

Ordered set of unique tokens

7eff300

KurtCattiSchmidt added the agenda+ To be discussed at a triage meeting label Apr 8, 2026

zcorpan mentioned this pull request Apr 20, 2026

Upcoming WHATNOT meeting on 2026-04-16 #12370

Closed

emilio reviewed Apr 22, 2026

View reviewed changes

Comment thread source

Adding note about FOUC in example

ed9b8f7

KurtCattiSchmidt mentioned this pull request Apr 29, 2026

Upcoming WHATNOT meeting on 2026-04-30 #12401

Closed

jstenback removed the agenda+ To be discussed at a triage meeting label Apr 30, 2026

Adding HTMLTemplateElement.shadowRootAdoptedStyleSheets, shadowrootse…

6764c68

…rializable, and failed fetch behavior

This was referenced May 6, 2026

Declarative CSS Modules #11687

Open

Upcoming WHATNOT meeting on 2026-05-07 #12413

Closed

noamr reviewed May 7, 2026

View reviewed changes

chromium-wpt-export-bot mentioned this pull request May 12, 2026

[CSS Modules] Update fetching strategy web-platform-tests/wpt#59805

Merged

Fixing specifier splitting by whitespace

3897188

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

shadowrootadoptedstylesheets on <template>#12339

shadowrootadoptedstylesheets on <template>#12339
KurtCattiSchmidt wants to merge 8 commits into
whatwg:mainfrom
KurtCattiSchmidt:sas-fetch

KurtCattiSchmidt commented Apr 6, 2026 •

edited by pr-preview Bot

Loading

Uh oh!

noamr commented Apr 16, 2026

Uh oh!

keithamus commented Apr 16, 2026

Uh oh!

noamr commented Apr 16, 2026

Uh oh!

KurtCattiSchmidt commented Apr 22, 2026

Uh oh!

emilio left a comment

Uh oh!

Uh oh!

noamr May 7, 2026

Uh oh!

KurtCattiSchmidt May 15, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

5 participants

Conversation

KurtCattiSchmidt commented Apr 6, 2026 • edited by pr-preview Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

noamr commented Apr 16, 2026

Uh oh!

keithamus commented Apr 16, 2026

Uh oh!

noamr commented Apr 16, 2026

Uh oh!

KurtCattiSchmidt commented Apr 22, 2026

Uh oh!

emilio left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

noamr May 7, 2026

Choose a reason for hiding this comment

Uh oh!

KurtCattiSchmidt May 15, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

5 participants

KurtCattiSchmidt commented Apr 6, 2026 •

edited by pr-preview Bot

Loading